<template>
  <div class="OnlineService">
    <div class="title">
      <h3>在线服务</h3>
    </div>
    <div class="ment-div-form">
      <el-form ref="form" :model="form">
        <el-row>
          <el-col :span="8">
            <el-form-item label="服务名称:" class="ele-form-item-Name">
              <el-input
                v-model="form.serviceName"
                class="ele-name-input"
                placeholder="请输入服务名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="服务分类:">
              <el-select v-model="form.serviceType" @change="getServiceTypeListByid">
                <el-option v-for="(item,index) in serviceTypeList" :key="index" :value="item.value" :label="item.label" />
              </el-select>
              <el-select v-model="form.serviceSubType">
                <el-option v-for="(item,index) in serviceSubTypeList" :key="index" :value="item.value" :label="item.label" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="服务状态:">
          <el-select v-model="form.serviceState" clearable @change="reloadTableData">
            <el-option label="全部状态" value="allService" />
            <el-option label="销售中" value="saling" />
            <el-option label="未销售" value="notSold" />
          </el-select>
        </el-form-item>
        <el-form-item class="ele-form-item-last">
          <el-col :offset="1" class="el-col-offset">
            <el-button type="primary" class="ele-btn-submit" @click="loadTableData">筛选</el-button>
          </el-col>
        </el-form-item>
      </el-form>
    </div>
    <!--    <div class="ele-div-btn">
      <el-button type="primary" @click="addService">添加服务</el-button>
    </div>-->
    <div class="ele-div-btn">
      <el-button type="primary" @click="addService">添加服务</el-button>
    </div>
    <div class="butList">
      <el-radio-group v-model="form.serviceState" @change="tabClick">
        <el-radio-button label="allService">全部状态</el-radio-button>
        <el-radio-button label="saling">销售中</el-radio-button>
        <el-radio-button label="notSold">未销售</el-radio-button>
      </el-radio-group>
    </div>
    <div class="ment-div-table">
      <el-table
        ref="elTable"
        v-loading="listLoading"
        :data="list"
        element-loading-text="正在查询中。。。"
        @selection-change="selectChange"
      >
        <el-table-column type="selection" fixed="left" width="50" />
        <el-table-column label="服务名称" prop="service">
          <template slot-scope="scope">
            <el-col :span="6">
              <TableColumnGoodsImage :src="JSON.parse(scope.row.serviceImage)[0]" />
              <!--              <img :src="JSON.parse(scope.row.serviceImage)[0]" alt="">-->
            </el-col>
            <el-col :span="18">
              {{ scope.row.name }}
            </el-col>
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="state">
          <template slot-scope="scope">
            <el-col v-if="scope.row.stat===1" :span="24">
              销售中
            </el-col>
            <el-col v-else-if="scope.row.stat===0" :span="24">
              未销售
            </el-col>
          </template>
        </el-table-column>
        <el-table-column label="访问量" prop="numberCount">
          <template slot-scope="scope">
            <p>访问人数：{{ scope.row.visitCount }}</p>
            <p>访问次数：{{ scope.row.personCount }}</p>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="300">
          <template slot-scope="scope">
            <span>
              <el-button
                type="text"
                @click="getServiceCityById(scope.row)"
              >服务城市</el-button>&nbsp;
            </span>
            <span>
              <el-button
                type="text"
                @click="copyService(scope.row)"
              >复制服务</el-button>
                  &nbsp;
            </span>
            <span v-if="scope.row.stat === 0">
              <el-button
                type="text"
                @click="operation(scope.row)"
              >编辑 </el-button>&nbsp;
            </span>
            <span v-if="scope.row.stat === 0">
              <el-button
                type="text"
                @click="upService(scope.row)"
              >上架</el-button>
            </span>
            <span v-if="scope.row.stat === 1">
              <el-button
                type="text"
                @click="lowService(scope.row)"
              >下架</el-button>
            </span>
            <span v-if="scope.row.stat === 0">
              <el-button
                type="text"
                @click="deleteService(scope.row)"
              >删除</el-button>
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="ele-div-footer">
      <div class="footer-left">
        <el-button v-if="form.serviceState != 'allService'" plain size="small" @click="allSelection">全选</el-button>
        <el-button v-if="form.serviceState === 'notSold'" plain size="small" type="primary" @click="allUpService">上架</el-button>
        <el-button v-if="form.serviceState === 'saling'" plain size="small" type="primary" @click="allLowService">下架</el-button>
        <el-button v-if="form.serviceState === 'notSold'" plain size="small" type="primary" @click="allDeleteService">删除</el-button>
      </div>
      <el-pagination
        background
        :page-sizes="[10, 20, 30, 50, 100]"
        :page-size="limit"
        :pager-count="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="pageSizeChange"
        @current-change="currentPageChange"
      />
    </div>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import { changeState, deleteById, getClassByService, onlineServiceList } from '@/api/service'
import TableColumnGoodsImage from '@/components/TableColumnGoodsImage'
/** 在线服务 */
export default {
  name: 'OnlineService',
  components: { TableColumnGoodsImage },
  data() {
    return {
      orderType: 'allService',
      form: {
        serviceName: '',
        serviceType: '',
        serviceSubType: '',
        serviceState: 'allService'
      },
      /*  formData: {
        shopId: localStorage.getItem('shopId'),
        serviceName: '',
        serviceTypeId: '',
        serviceState: 'allService',
        page: 1,
        limit: 15
      },*/
      // table
      list: [],
      listLoading: true,
      total: 0,
      limit: 10,
      page: 1,
      selectIdList: [],
      serviceTypeList: [],
      serviceSubTypeList: []
    }
  },
  computed: {
    /* 请求头部信息*/
    headers() {
      return {
        'X-Litemall-Admin-Token': getToken()
      }
    }
  },
  created() {
    this.getServiceTypeList()
    this.loadTableData()
  },
  methods: {
    getServiceTypeList() {
      getClassByService({ shopId: parseInt(localStorage.getItem('shopId')) }).then(response => {
        this.serviceTypeList = response.data.data
        console.log(this.serviceTypeList)
      })
    },
    getServiceTypeListByid(data) {
      this.serviceSubTypeList = []
      this.form.serviceSubType = ''
      if (this.form.serviceType !== '') {
        console.log(this.serviceTypeList)
        this.serviceTypeList.forEach(item => {
          if (item.value === data) {
            this.serviceSubTypeList = item.children
          }
        })
      }
    },
    resetForm() {
      const vm = this
      vm.$refs.form.resetFields()
      vm.reloadTableData()
    },
    search() {
      const vm = this
      vm.$refs.form.validate((valid) => {
        if (valid) {
          vm.reloadTableData()
        }
      })
    },
    pageSizeChange(pageSize) {
      const vm = this

      vm.limit = pageSize

      vm.$refs.form.validate((valid) => {
        if (valid) {
          vm.reloadTableData()
        }
      })
    },
    currentPageChange(page) {
      const vm = this

      vm.page = page

      vm.$refs.form.validate((valid) => {
        if (valid) {
          vm.loadTableData()
        }
      })
    },
    reloadTableData() {
      const vm = this

      vm.page = 1
      vm.total = 0
      vm.list = []
      vm.loadTableData()
    },
    loadTableData() {
      const vm = this

      const data = {
        page: vm.page,
        limit: vm.limit,
        shopId: parseInt(localStorage.getItem('shopId'))
      }

      if (vm.form.serviceName) {
        data['serviceName'] = vm.form.serviceName
      }

      data['serviceState'] = vm.form.serviceState
      /* if (vm.form.serviceState !== 'allService') {

      }*/

      if (vm.form.serviceType) {
        data['serviceTypeId'] = vm.form.serviceType
        if (vm.form.serviceSubType) {
          data['serviceSubTypeId'] = vm.form.serviceSubType
        }
      }

      vm.listLoading = true

      onlineServiceList(data).then(res => {
        vm.listLoading = false
        vm.total = res.data.data.total
        vm.list = res.data.data.data ? res.data.data.data : []
      }).catch(res => {
        vm.listLoading = false
        if (res && res.data && res.data.errno !== 0) {
          this.$message.error(`${res.data.errmsg}（${res.data.errno}）`)
        }
      })
    },
    /* getByList() {
      this.formData.serviceTypeId = this.form.serviceSubType
      this.formData.serviceState = this.form.serviceState
      this.formData.serviceName = this.form.serviceName
      onlineServiceList(this.formData).then(response => {
        this.list = response.data.data.data
        this.total = response.data.data.total
        /!* this.list1 =[{id:1,service:{Name:'xxx服务',image:'xxxx'},state:'saling',serviceCount:{count:100,people:100}}]*!/
        this.listLoading = false
      }).catch(() => {
        this.list = []
        this.total = 0
        this.listLoading = false
      })
    },*/
    /* getList() {
      this.listLoading = true
      onlineServiceList(this.formData).then(response => {
        this.list = response.data.data.data
        this.total = response.data.data.total
        /!* this.list1 =[{id:1,service:{Name:'xxx服务',image:'xxxx'},state:'saling',serviceCount:{count:100,people:100}}]*!/
        this.listLoading = false
      }).catch(() => {
        this.list = []
        this.total = 0
        this.listLoading = false
      })
    },*/
    /** 添加在线服务 */
    addService() {
      this.$router.push({ name: 'addOnlineService' })
    },
    allSelection() {
      this.$refs.elTable.toggleAllSelection()
    },
    allUpService() {
      if (this.selectIdList && this.selectIdList.length === 0) {
        this.$message.error('请选择服务')
      } else {
        this.$confirm('是否上架所选服务?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const data = {
            idList: this.selectIdList,
            commodityState: 1
          }
          changeState(data).then(res => {
            this.$notify.success({
              title: '成功',
              message: '上架成功'
            })
            this.loadTableData()
          })
        }).catch(() => {
          this.$notify({
            type: 'info',
            message: '已取消上架'
          })
        })
      }
    },
    allLowService() {
      if (this.selectIdList && this.selectIdList.length === 0) {
        this.$message.error('请选择服务')
      } else {
        this.$confirm('是否下架所选服务?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const data = {
            idList: this.selectIdList,
            commodityState: 0
          }
          changeState(data).then(res => {
            this.$notify.success({
              title: '成功',
              message: '下架成功'
            })
            this.loadTableData()
          })
        }).catch(() => {
          this.$notify({
            type: 'info',
            message: '已取消下架'
          })
        })
      }
    },
    allDeleteService() {
      if (this.selectIdList && this.selectIdList.length === 0) {
        this.$message.error('请选择服务')
      } else {
        this.$confirm('是否删除所选服务?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteById(this.selectIdList).then(res => {
            this.$notify.success({
              title: '成功',
              message: '删除成功'
            })
            this.loadTableData()
          })
        }).catch(() => {
          this.$notify({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    },
    /** 服务 */
    getServiceCityById(row) {
      this.$router.push({ name: 'operateCity', query: { p: this.$ed(row) }})
      /* this.$router.push({
        name: 'operateCity',
        query: {
          P:this.$ed({
            row:row
          })
              /!*id: row.id,
              serviceName: row.name,
              serviceImage: JSON.parse(row.serviceImage)[0]*!/

        }})*/
    },
    /** 复制*/
    copyService(row) {
      this.$router.push({ name: 'copyOnlineService', query: { p: this.$ed({ serviceInfo: row, copy: true }) }})
    },
    /** 上架*/
    upService(row) {
      this.$confirm('是否上架该服务?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const data = {
          idList: [row.id],
          commodityState: 1
        }
        changeState(data).then(res => {
          this.$notify.success({
            title: '成功',
            message: '上架成功'
          })
          this.loadTableData()
        })
      }).catch(() => {
        this.$notify({
          type: 'info',
          message: '已取消上架'
        })
      })
    },
    /** 下架*/
    lowService(row) {
      this.$confirm('是否下架该服务?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const data = {
          idList: [row.id],
          commodityState: 0
        }
        changeState(data).then(res => {
          this.$notify.success({
            title: '成功',
            message: '下架成功'
          })
          this.loadTableData()
        })
      }).catch(() => {
        this.$notify({
          type: 'info',
          message: '已取消下架'
        })
      })
    },
    deleteService(row) {
      this.$confirm('是否删除该服务?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const data = [row.id]
        deleteById(data).then(res => {
          this.$notify.success({
            title: '成功',
            message: '删除成功'
          })
          this.loadTableData()
        })
      }).catch(() => {
        this.$notify({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    /** 编辑 */
    operation(row) {
      this.$router.push({ name: 'editOnlineService', query: { p: this.$ed({ serviceInfo: row, edit: true }) }})
      /* this.$router.push({
        name: 'operateCity',
        query: {
          p: this.$ed({
            serviceInfo: row,
            edit: true
          })
        }})*/
    },
    /** tabs选项卡 */
    tabClick(e) {
      this.reloadTableData()
    },
    /** 重置*/
    /* resetFormData() {
      this.formData.serviceName = ''
      this.formData.serviceState = 'allService'
      this.formData.serviceType = ''
      this.formData.serviceSubType = ''
      this.form.serviceName = ''
      this.form.serviceState = ''
      this.form.serviceType = ''
      this.form.serviceSubType = ''
      this.getList()
    },*/
    /** 表格单选触发*/
    selectChange(e) {
      this.selectIdList = []
      e.forEach(element => {
        this.selectIdList.push(element.id)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.OnlineService {
  padding: 50px 100px;
  min-width: 1700px;
  .ment-div-form {
    margin-top: 50px;
    .ele-form-item-Name {
      .ele-name-input {
        width: 250px;
      }
    }
    .ele-form-item-last {
      .el-col-offset {
        margin-left: 72px;
      }
      .ele-btn-submit {
        width: 100px;
      }
    }
  }
  .ele-div-btn {
    width: 100%;
    position: relative;
    ::v-deep.el-button {
      position: absolute;
      right: 0px;
      z-index: 100;
    }
  }
  .ment-div-table {
  }
  .ele-div-footer {
    display: flex;
    justify-content: space-between;
    margin: 50px 0px 100px 0px;
    .footer-left {
      ::v-deep.el-button {
        width: 100px;
        margin: 0px;
      }
    }
  }
}
</style>
